import React, { Component, createRef } from 'react'
import './index.scss'
import Life from '../Life/index'
import Block from '../Block/index'
import Ball from '../Ball/index'
import Racket from '../Racket/index.jsx'
import createMap from '../../util/createMap'
import { connect } from 'react-redux'
import * as vmapActions from '../../actions/vmap'
import { bindActionCreators } from 'redux'
 class Main extends Component {
    constructor() {
        super()
        this.gameBox = createRef()
        this.map = createRef()
        this.state = {
           wrapHeight: 0,
           wrapWidth: 0,
           mousePosition: window.innerWidth / 2,
           racketX: 500,
           round: 1
        }
    }
    componentDidMount () {
        createMap.call(this)
        // this.gameBox.current.style.width = window.innerWidth
        // this.gameBox.current.style.height = window.innerHeight
        // this.map.current.style.height = 100
        // this.map.current.style.width = 100
        this.setState({
            wrapWidth: this.gameBox.current.offsetWidth,
            wrapHeight: this.gameBox.current.offsetHeight
        },() => {
        })
    }
    setRackX = (racketX) => {
        this.setState({
            racketX
        })
    }
    lostLife = () => {
        this.lifeComp.reduce()
    }
    addLife = () => {
        this.lifeComp.add()
    }
    nextRound = () => {
        console.log('next')
        this.setState({
            round: this.state.round+1
        })
    }
    // 问题：setState异步 
    // mouseMove = (e) => {
    //     this.setState({
    //         mousePosition: e.clientX
    //     })
    // }
    render() {
        const { vMap } = this.props
        const { round } = this.state
        return (
            <div className="game-container" id="game-container" ref={this.gameBox} 
            // onMouseMove={(e) => {this.mouseMove(e)}}
            >
                {/* 生命 */}
                <div className="life">
                    {/* onRef属性 属性值传入一个函数 函数参数是Life组件对象 */}
                <Life onRef={c=>this.lifeComp = c}></Life>
                </div>
                {/* 地图 */}
                <div className="block-map" ref={this.map}>
                    {
                        vMap.length > 0 ? (
                            vMap.map((item,row) =>
                            <div className="block-row" key={row}>
                                {
                                     item.map((subItem,col) => (
                                        <Block round={round} blockType={subItem} key={row+' '+col} row={row} col={col}></Block>
                                    ))
                                }
                            </div>
                            )
                        ) : ''
                    }
                </div>
                {/* 滑板 */}
                <Racket {...this.state} setRackX={this.setRackX}></Racket>
                {/* 球 */}
                <Ball nextRound={this.nextRound} addLife={this.addLife} lostLife={this.lostLife} {...this.state} racketX={this.state.racketX}></Ball>
            </div>
        )
    }
}
const mapState = (state) => {
    return {
        vMap: state.vMap.vMap
    }
}
const mapActions = (dispatch) => {
    return  {
        vmapActions: bindActionCreators(vmapActions,dispatch)
    }
}
export default connect(mapState,mapActions)(Main)

